<template>
  <div class="box">
    <div>
        <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>单价</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in showList" :key="item.id">
            <td>{{item.bookName}}</td>
            <td>{{item.writer}}</td>
            <td>{{item.price}}</td>
            <td>{{item.status ? "可借":"已借出"}}</td>
            <td><button @click="toggleStatus(item)">{{item.status ? "借阅":"还"}}</button></td>
        </tr>        
    </tbody>
    <div>图书馆当前状态已借出{{isLendNum}}本书/还剩{{noLend}}本书</div>
    <tfoot>
        <tr>
            <td><button @click="changeBtn('全部')" :class="{active:btnStatus=='全部'}">全部</button></td>
            <td><button @click="changeBtn('1')" :class="{active:btnStatus=='1'}">已借出</button></td>
            <td><button @click="changeBtn('2')" :class="{active:btnStatus=='2'}">可借</button></td>
        </tr>
    </tfoot>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
            {bookName:"西游记",price:66,writer:"吴承恩",id:0,status:false},
            {bookName:"水浒传",price:77,writer:"施耐庵",id:1,status:true},
            {bookName:"红楼梦",price:88,writer:"曹雪芹",id:2,status:true},
            {bookName:"三国演义",price:99,writer:"罗贯中",id:3,status:true},           
            ],
            btnStatus:"全部"
        }
    },
    methods:{
        toggleStatus(item){
           
                if(item.status==true){
                    // console.log(this.list);
                    
                    item.status=false
                    
                }
                else if(item.status==false){
                    // console.log(222);
                    item.status=true
                    
                
            }
        },
        changeBtn(n){
            this.btnStatus=n;
            
            
        }
    },
    computed:{
        isLendNum(){
            return this.list.filter(item=>!item.status).length
        },
        noLend(){
            return this.list.length-this.list.filter(item=>!item.status).length
        },
        showList(){
            switch(this.btnStatus){
                case "1":return this.list.filter(item=>item.status===false);
                case "2":return this.list.filter(item=>item.status===true);
                default :return this.list
            }
        }

    }
    

}
</script>

<style scoped>
.box{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.active{
    background-color: pink;
    border: none;
}
</style>